<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Calendar Table | Chapter 7 | CSS Mastery </title>
</head>
<style type="text/css">
<!--

body {
	font-family: "myriad pro", arial, helvetica, sans-serif;
  font-size:16px;
  line-height:1.125em; /* Baseline grid of 18px */
}


/* tables may still need 'cellspacing="0"' in the markup */
table.cal {
	border-collapse: collapse;
	border-spacing: 0;
	text-align: center;
	border-bottom: 1px solid #666;
}

.cal caption {
	font-size:1.3em;
	padding-top: 0.692em; /* 9px */
	padding-bottom: 0.692em; /* 9px */
}


.cal thead th {
	border-top: 3px solid #666;
	border-bottom: 3px solid #666;
	padding-top: 0.692em; /* 9px */
	padding-bottom: 0.692em; /* 9px */
}



/* @group Header */
	
.cal caption a:link,
.cal caption a:visited,
.cal caption a:hover,
.cal caption a:active,
.cal caption a:focus {
	background-color: #CCC;
	text-decoration: none;
	color: black;
	padding: 0 0.2em;
}

.cal caption a:hover,
.cal caption a:active,
.cal .caption a:focus {
	background-color: blue;
	color: white;
}
	
/* @end */
	
/* @group Days */
	
.cal tbody {
	color: #999;
}

.cal tbody a:link,
.cal tbody a:visited,
.cal tbody a:hover,
.cal tbody a:focus,
.cal tbody a:active {
	display: block;
	text-decoration: none;
	color: black;
	font-weight: bold;
	padding: 0.385em 0.692em 0.308em 0.692em; /* 5px 9px 4px 9px */
}

.cal tbody a:hover,
.cal tbody a:focus,
.cal tbody a:active {
	/*outline: 1px solid #ccc;*/
	background-color: #CCC;
	color: black;
}

.cal tbody .selected a:link,
.cal tbody .selected a:visited,
.cal tbody  .selecteda:hover,
.cal tbody  .selected a:focus,
.cal tbody .selected a:active {
	background-color: blue;
	color: white;
}

	/* @end */



-->
</style>
</head>

<body>

<table class="cal" summary="A calandar style date picker">
<caption>
	<a href="#" class="prev">&lt;</a> January 2008 <a href="#" class="next">&gt;</a>
</caption>
<colgroup>  <col id="sun" />  <col id="mon" />  <col id="tue" />  <col id="wed" />
  <col id="thur" />
  <col id="fri" />
  <col id="sat" /></colgroup>

<thead>
	<tr>
		<th scope="col">S</th>
		<th scope="col">M</th>
		<th scope="col">T</th>
		<th scope="col">W</th>
		<th scope="col">T</th>
		<th scope="col">F</th>
		<th scope="col">S</th>
	</tr>
</thead>

	<tbody>
		<tr>
			<td>30</td>
			<td>31</td>
			<td><a href="#">1</a></td>
			<td><a href="#">2</a></td>
			<td><a href="#">3</a></td>
			<td><a href="#">4</a></td>
			<td><a href="#">5</a></td>
		</tr>
		<tr>
			<td><a href="#">6</a></td>
			<td><a href="#">7</a></td>
			<td class="selected"><a href="#">8</a></td>
			<td><a href="#">9</a></td>
			<td><a href="#">10</a></td>
			<td><a href="#">11</a></td>
			<td><a href="#">12</a></td>
		</tr>
		<tr>
			<td><a href="#">13</a></td>
			<td><a href="#">14</a></td>
			<td><a href="#">15</a></td>
			<td><a href="#">16</a></td>
			<td><a href="#">17</a></td>
			<td><a href="#">18</a></td>
			<td><a href="#">19</a></td>
		</tr>
		<tr>
			<td><a href="#">20</a></td>
			<td><a href="#">21</a></td>
			<td><a href="#">22</a></td>
			<td><a href="#">23</a></td>
			<td><a href="#">24</a></td>
			<td><a href="#">25</a></td>
			<td><a href="#">26</a></td>
		</tr>
		<tr>
			<td><a href="#">27</a></td>
			<td><a href="#">28</a></td>
			<td><a href="#">29</a></td>
			<td><a href="#">30</a></td>
			<td><a href="#">31</a></td>
			<td>1</td>
			<td>2</td>
		</tr>
	</tbody>
</table>

</body>
</html>
